import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:shousi/components/button.dart';
import 'package:shousi/components/food_title.dart';
import 'package:shousi/models/Foods.dart';

import '../theme/color.dart';

class MenuPage extends StatefulWidget {
  const MenuPage({super.key});

  @override
  State<MenuPage> createState() => _MenuPageState();
}

class _MenuPageState extends State<MenuPage> {
  List foodMenu = [
    Food(
        name: 'ebi',
        price: '20.00',
        imagePath: 'images/ebi.png',
        rating: '4.9'),
    Food(
        name: 'salmon',
        price: '16.00',
        imagePath: 'images/salmon.png',
        rating: '3.1'),
    Food(
        name: 'sushi',
        price: '23.00',
        imagePath: 'images/sushi.png',
        rating: '4.9'),
    Food(
        name: 'tuna',
        price: '20.00',
        imagePath: 'images/tuna.png',
        rating: '3.9')
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: Icon(
          Icons.menu,
          color: Colors.grey[900],
        ),
        elevation: 0,
        title: Text(
          '贝康1',
          style: TextStyle(color: Colors.grey[900]),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            decoration: BoxDecoration(
                color: primaryColor, borderRadius: BorderRadius.circular(20)),
            padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 30),
            margin: const EdgeInsets.symmetric(horizontal: 25),
            // symmetrical表示对称，horizontal表示水平方向
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Text('Get 32% Promo',
                        style: GoogleFonts.dmSerifDisplay(
                          color: Colors.white,
                          fontSize: 20,
                        )),
                    const SizedBox(height: 20),
                    MyButton(
                        text: 'redeem',
                        onTap: () {
                          print('234234');
                        })
                  ],
                ),
                Image.asset('images/sushi.png', height: 100)
              ],
            ),
          ),
          const SizedBox(height: 25),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25.0),
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(20)),
                  focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(20)), hintText: 'search Here!'),
            ),
          ),
          //   menulist
          const SizedBox(height: 25),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25.0),
            child: Text(
              'Food Menu',
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.grey[800],
                  fontSize: 18),
            ),
          ),
          const SizedBox(height: 10),
          Expanded(
              child: Padding(
            padding: const EdgeInsets.only(left: 25.0),
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: foodMenu.length,
                itemBuilder: (context, index) =>
                    FoodTitle(food: foodMenu[index])),
          )),
          const SizedBox(height: 25),
          Container(
            decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(20)),
            margin: const EdgeInsets.only(left: 25, right: 25, bottom: 25),
            padding: const EdgeInsets.all(20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Image.asset(
                      'images/tuna.png',
                      height: 60,
                    ),
                    const SizedBox(width: 20),
                    Column(
                      children: <Widget>[
                        Text(
                          'Salmon Eggs',
                          style: GoogleFonts.dmSerifDisplay(fontSize: 18),
                        ),
                        const SizedBox(height: 10),
                        Text(
                          '\$21.00',
                          style: TextStyle(color: Colors.grey[700]),
                        ),
                      ],
                    ),
                  ],
                ),
                const Icon(
                  Icons.favorite_outline_outlined,
                  size: 28,
                  color: Colors.grey,
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}
